<template>
  <div class="container">
    <EarthMap :url="configUrl" map-key="fsmap" @onload="mapOnload" class="map-3d" ref="map3d">
    </EarthMap>
    <div class="ui-container">
      <div class="top">
        <div class="title">{{ systemTitle }}</div>
        <div class="top-btns">
          <div class="menu-btns">
            <template v-for="item in menus" :key="item.path">
              <el-dropdown v-if="item.meta.title === '安全监测'" trigger="click" @command="handleSafetyCommand">
                <div :class="isSafety ? 'btn-action' : 'btn'">
                  {{ item.meta.title }}
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="safety in item.children" :command="safety.name">{{ safety.meta.title
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <div v-else :class="routerName == item.name ? 'btn-action' : 'btn'" @click="changePage(item.path)">
                {{ item.meta.title }}
              </div>
            </template>
          </div>
        </div>
        <div class="info space-between">
          <div class="date-time">
            <div class="date">
              <div>{{ state.date }}</div>
              <div class="time">{{ state.time }}</div>
            </div>
          </div>
          <div class="line-bord"></div>
          <div class="weather-info">
            <div>{{ state.weekName }}</div>
            <div class="weather-icon">
              <div>29℃ 晴</div>
            </div>
          </div>

          <div class="weather-img">
            <img src="@/assets/svg/partly_cloudy.svg" width="45px" alt="logo" />
          </div>
          <div class="line-bord"></div>
          <div class="fullscreen-icon" @click="toggleFullScreen">
            <el-icon :size="22" color="#edf7ff">
              <FullScreen v-if="!isFullScreen" />
              <Hide v-else />
            </el-icon>
          </div>
          <div class="line-bord"></div>
          <UserAvatar></UserAvatar>
        </div>
      </div>
      <div class="main">
        <!-- 这里是页面内容，使用了 Vue Router -->
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { dayjs } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { emitter } from "@/utils/events";
import EarthMap from "@/components/EarthMap/Index";
import * as mars3d from "mars3d";
import * as Cesium from "mars3d-cesium";
import MapUtils from "./mapUtils";
import UserAvatar from "@/components/UserAvatar/UserAvatar";
import useUserStore from "@/store/modules/user";
import { FullScreen, Aim, Hide } from "@element-plus/icons-vue";
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
import useOnemapStore from "@/store/modules/onemap";

const userRoles = computed(() => useUserStore().roles);
const cachedRoutes = [];
const systemTitle = ref("青阳县矿山全生命周期综管平台");
const configUrl = "config/config.json";
const { proxy } = getCurrentInstance();

// 添加全屏状态变量
const isFullScreen = ref(false);

const route = useRoute();
const router = useRouter();
const changePage = (url) => {
  router.push(url);
};

// 处理安全监测下拉菜单选项的点击事件
const handleSafetyCommand = (command) => {
  // 根据选择的选项进行相应的路由跳转或操作
  // 这里可以根据实际需求添加路由跳转逻辑
  router.push({ path: `/safety/${command}` });
};

const state = reactive({
  time: "",
  date: "",
  weekName: "",
});

const menus = route.matched[0].children;
const onemapStore = useOnemapStore();

const routerName = computed(() => {
  return route.name;
});

const isSafety = computed(() => {
  // 判断当前路由是否在缓存列表中
  return route.meta.safetySelect
});

const from = computed(() => {
  return route.query.from;
});

// const menus = computed(() => {
//   const list = route.matched[0].children;
//   console.log({ list });
//   return list;
// });

watch(
  () => onemapStore.nodeLevel,
  (newValue, oldValue) => {
    if (newValue < 4) {
      map3dUtil.flyToDistrict();
    } else {
      map3dUtil.flyToMine();
    }
  }
);

router.afterEach((to, from) => {
  nextTick(() => {
    // 页面切换完成后，向未被缓存过的对应的页面发送地图初始化完成事件
    if (to.name && !cachedRoutes.includes(to.name)) {
      cachedRoutes.push(to.name);
      emitter.emit(`mapOnload`, map);
    }
  });
});

emitter.on("flyToMine", () => {
  map3dUtil.flyToMine();
});

let map, map3dUtil;
const mapOnload = (mapInstance) => {
  proxy.$map3d.setMap3d(mapInstance);
  map = mapInstance;
  // 告诉订阅者地图加载完成了，并把地图实例传递给订阅者
  emitter.emit(`mapOnload`, mapInstance);
  cachedRoutes.push(route.name);
  map3dUtil = new MapUtils(mapInstance);
  map3dUtil.initialization();
};

// 全屏切换函数
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement
      .requestFullscreen()
      .then(() => {
        isFullScreen.value = true;
      })
      .catch((err) => {
        console.error(`全屏请求失败: ${err.message}`);
      });
  } else {
    if (document.exitFullscreen) {
      document
        .exitFullscreen()
        .then(() => {
          isFullScreen.value = false;
        })
        .catch((err) => {
          console.error(`退出全屏失败: ${err.message}`);
        });
    }
  }
};
onBeforeUnmount(() => {
  try {
    emitter.removeAllListeners();
  } catch (error) { }
});

// 头部信息栏日期和天气
const weekArr = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];

// 日期时间
const getCurrentTime = () => {
  state.date = dayjs().format("YYYY-MM-DD");
  state.time = dayjs().format("HH:mm:ss");
  state.weekName = weekArr[dayjs().day()];
};
setInterval(() => {
  getCurrentTime();
}, 1000);
</script>

<style lang="less" scoped>
/* 自定义下拉菜单样式 */
:deep(.el-dropdown-menu) {
  background-color: rgba(4, 16, 36, 0.9);
  border: 1px solid #135280;
  border-radius: 4px;
}

:deep(.el-dropdown-menu__item) {
  color: #edf7ff;
  font-size: 14px;

  &:hover {
    background-color: rgba(31, 198, 255, 0.2);
    color: #1fc6ff;
  }
}

:deep(.el-popper__arrow) {
  display: none;
}

.container {
  height: 100vh;
  width: 100%;
  background: transparent;
  // --el-border-color: #135280;
  background-color: RGBA(4, 16, 36, 1);
  position: relative;
  overflow: hidden;

  .map-3d {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    pointer-events: all;
  }

  .ui-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: url(@/assets/images/green/zhez.png);
    background-size: 100% 100%;

    .top {
      position: relative;
      box-sizing: border-box;
      height: 86px;
      background-image: url(@/assets/images/green/header-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0px 12px;
      pointer-events: all;

      .top-btns {
        position: absolute;
        left: 36.5%;
        top: 50px;
        font-size: 16px;

        .menu-btns {
          display: flex;
          align-items: center;
          gap: 16px;
          // font-family: PangMen;
          font-family: PangMen;

          .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            width: 140px;
            height: 32px;
            background-image: url(@/assets/images/green/menu-btn.png);
            background-size: 100% 100%;
            cursor: pointer;
            font-size: 20px;

            &:active {
              scale: 0.95;
              // background-image: url(@/assets/images/redesign/anniuxuanzhong.png);
            }
          }

          .btn-action {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            width: 140px;
            height: 32px;
            background-image: url(@/assets/images/green/menu-btn-active.png);
            background-size: 100% 100%;
            font-size: 20px;
            cursor: pointer;
          }
        }
      }

      .line-bord {
        width: 1px;
        height: 32px;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgb(9 152 139) 47%,
            rgba(255, 255, 255, 0) 100%);
        border-radius: 0px 0px 0px 0px;
        margin: 0 10px;
      }

      .info {
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        right: 16px;
        top: 42px;
        // background-color: pink;
        color: #edf7ff;

        .weather-info {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .weather-img {
          width: 60px;
          height: 40px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .fullscreen-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          width: 40px;
          height: 40px;
          pointer-events: auto;

          &:hover {
            opacity: 0.8;
          }
        }

        .weather {
          display: flex;
          align-items: center;
        }

        .btn {
          width: 95px;
          height: 40px;
          color: #edf7ff;
          margin-top: 6px;
          // background-image: url(@/assets/images/btnBg.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
        }

        .link-menu {
          margin-right: 12px;
          border: 1px solid #14586e;
          line-height: 28px;
          padding: 0px 12px;
          border-radius: 4px;
          color: #1fc6ff;
        }

        &.space-between {
          // justify-content: flex-end;
          // justify-content: space-evenly;
          justify-content: space-between;

          .info-btn {
            // margin-left: 16px;
            font-size: 14px;
            font-weight: normal;
            border: 1px solid #14586e;
            line-height: 28px;
            padding: 0px 12px;
            text-align: center;
            border-radius: 4px;
            display: flex;
            align-items: center;

            .el-icon {
              margin-right: 4px;
            }
          }

          .info-btn:hover {
            cursor: pointer;
            border: 1px solid #1fc6ff;
          }
        }
      }

      .title {
        font-family: PangMen;
        color: #edf7ff;
        text-align: justify;
        font-size: 42px;
        font-style: normal;
        font-weight: 550;
        line-height: 90px;
        background: linear-gradient(180deg, #ffffff 0%, #08d27a 100%);
        -webkit-background-clip: text;
        /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent;
        /*给文字设置成透明*/
      }
    }

    .main {
      flex: 1;
      box-sizing: border-box;
      font-size: 14px;
    }
  }
}
</style>
